<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/gou.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>

<body>
  <div class="gou_bar">
    <div class="inner">
      <a href="index.php"><img src="img/logo.png" /></a>
      <ul class="bar_ul">
        <li>我的购物车</li>
        <li>确认订单信息</li>
        <li>等待付款</li>
        <li>订单执行</li>
      </ul>
    </div>
  </div>

  <div class="shopping">
    <h4>保税区</h4>

    <table id="cartTable">
      <thead>
        <tr>
          <th>
            <label><input class="check-all check" type="checkbox" />&nbsp;全选</label>
          </th>
          <th>商品信息</th>
          <th>商品单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox">
            <input class="check-one check" type="checkbox" />
          </td>
          <td class="goods">
            <img src="img/images/20150708112148lm2t0.jpg" alt="" /><span>飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯
              防漏带手柄（2件装）</span>
          </td>
          <td class="price">220.88</td>
          <td class="count">
            <span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span>
          </td>
          <td class="subtotal">220.88</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
          <td class="checkbox">
            <input class="check-one check" type="checkbox" />
          </td>
          <td class="goods">
            <img src="img/images/201509091748430829.jpg" alt="" /><span>日本Merries花王新生儿纸尿裤S82</span>
          </td>
          <td class="price">388.50</td>
          <td class="count">
            <span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span>
          </td>
          <td class="subtotal">388.50</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
          <td class="checkbox">
            <input class="check-one check" type="checkbox" />
          </td>
          <td class="goods">
            <img src="img/images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span>
          </td>
          <td class="price">1428.50</td>
          <td class="count">
            <span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span>
          </td>
          <td class="subtotal">1428.50</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
          <td class="checkbox">
            <input class="check-one check" type="checkbox" />
          </td>
          <td class="goods">
            <img src="img/images/201608081427026196.jpg" alt="" /><span>韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装
              多款颜色图案随机发货
            </span>
          </td>
          <td class="price">640.60</td>
          <td class="count">
            <span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span>
          </td>
          <td class="subtotal">640.60</td>
          <td class="operation"><span class="delete">删除</span></td>
        </tr>
      </tbody>
    </table>
    <div class="foot" id="foot">
      <label class="fl select-all"><input type="checkbox" class="check-all check" />&nbsp;全选</label>
      <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>

      <div class="fr closing">立即购买</div>
      <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
      <div class="fr selected" id="selected">
        已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span>
      </div>
      <div class="selected-view">
        <div id="selectedViewList" class="clearfix"></div>
        <span class="arrow">◆<span>◆</span></span>
      </div>
    </div>
  </div>

  <div class="last">
    <h5 class="last_h5">
      <img src="img/trduty_bg.jpg" />
      个人邮递进口物品清关税收解读
    </h5>
    <div class="last_bot">
      <ul>
        <li class="last_li0">
          个人邮递进境物品须界定为<a class="last_bot_sp1" href="">个人自用</a>
        </li>
        <li>
          <span class="last_li1">免征税</span>奶粉线征收跨境税，<span
            class="last_bot_sp2">取消50元以下免征额。美国线、快速线征收行邮税，50元以下免征额仍保留；</span>
        </li>
        <li>
          <span
            class="last_li2">非个人清关</span>奶粉线单次交易限值为人民币2000元（不分单件多件），个人年度交易限值为人民币20000元；美国线、快速线单个包裹限值≤1000（单件不可分割物品除外）；美国线单件不可物品限值≤5000；
        </li>
        <li>
          <span class="last_li3">被税</span>自理关税；如果您的货物在海关被税，海关或海淘橙官方将通知您支付税费；我们不会预收关税，请您只需选择海淘橙官方支付方式进行税务的缴纳。
        </li>
      </ul>
    </div>
  </div>

  <div class="BOTTOM">
    <div class="BB">
      <img src="img/bot_slogan.png" alt="" />
    </div>
  </div>
  <!--死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        -->
  <div class="BigBottom">
    <div class="Big">
      <div class="Big1">
        <p><a style="color: white" href="#">海淘橙</a></p>
        <p class="Big1a"><a href="#">关于我们</a></p>
        <p class="Big1a"><a href="#">免责声明</a></p>
        <p class="Big1a"><a href="#">联系我们</a></p>
      </div>
      <div class="Big2">
        <p><a style="color: white" href="#">海淘橙</a></p>
        <p class="Big1a"><a href="#">意见/建议</a></p>
        <p class="Big1a"><a href="#">海淘购物</a></p>
        <p class="Big1a"><a href="#">友情链接</a></p>
      </div>
      <div class="Big3">
        <p><a style="color: white" href="#">帮助中心</a></p>
        <p class="Big1a"><a href="#">新手指南</a></p>
        <p class="Big1a"><a href="#">常见问题</a></p>
        <p class="Big1a"><a href="#">正品保证</a></p>
        <p class="Big1a"><a href="#">物流配送</a></p>
      </div>
      <div class="Big4">
        <p><a style="color: white" href="#">资讯频道</a></p>
        <p class="Big1a"><a href="#">海淘咨询</a></p>
        <p class="Big1a"><a href="#">网站公告</a></p>
        <p class="Big1a"><a href="#">网站地图</a></p>
      </div>
      <div class="Big5"></div>
      <div class="Big6"></div>
      <div class="Big7">
        <span class="Big7a">微信订阅号</span>
        <span class="Big7b">扫一扫有惊喜</span>
        <img src="img/emw1.png" alt="" />
      </div>
      <div class="Big7">
        <span class="Big7a">微信订阅号</span>
        <span class="Big7b">扫一扫有惊喜</span>
        <img src="img/emw1.png" alt="" />
      </div>
      <div class="Big8"></div>
      <div class="Big9"></div>
      <div class="Big10">
        <p class="Big10a">关注我们</p>
        <img src="img/xlkjk.png" alt="" />
        <p class="Big10c">邮件订阅</p>
        <input class="Big10d" type="text" placeholder="请输入您的邮箱地址，订阅最新优惠" />
        <div class="Big10e">订阅</div>
      </div>
      <div class="Big11"></div>
      <div class="Big12"></div>
      <div class="Big13">
        Copyright 2012-2016 海淘橙 haitaocheng.com. All Rights
        Reserved.粤ICP备14073754号-1
      </div>
    </div>
  </div>

  <!--右侧购物栏-->
  <div class="right_l">
    <div class="regist_wrap">
      <div class="regist"></div>
    </div>
    <div class="regist_wrap2">
      <div class="regist2"></div>
      <p>一键购</p>
    </div>
    <div class="regist_wrap3">
      <div class="regist3"></div>
      <p>购物车</p>
    </div>
    <div class="regist_wrap4">
      <div class="regist4"></div>
    </div>
    <div class="regist_wrap5">
      <div class="regist5"></div>
    </div>
    <div class="regist_wrap6">
      <div class="regist6"></div>
    </div>
    <div class="regist_wrap7">
      <div class="regist7"></div>
    </div>

    <div class="regist_wrap8">
      <div class="regist8"></div>
    </div>
  </div>

  <script>
    //获取各个属性值
    var tbody = document.querySelector("tbody");
    var getadd = document.querySelectorAll(".add");
    var getreduce = document.querySelectorAll(".reduce");
    var getsubtotal = document.querySelectorAll(".subtotal");
    var getinput = document.querySelectorAll(".count-input");
    var getcount = document.querySelectorAll(".count");
    var gettr = document.querySelectorAll("tr");
    var del = document.querySelectorAll(".delete");
    var getprice = document.querySelectorAll(".price");
    var total = document.getElementById("selectedTotal");
    var priceTotal = document.getElementById("priceTotal");
    //删除实现
    del.forEach(function (item, key) {
      del[key].onclick = function () {
        gettr[key + 1].remove();
      };
    });
    //商品增减
    getadd.forEach(function (item, key) {
      getadd[key].onclick = function () {
        var num = parseInt(getinput[key].value);
        num++;
        getinput[key].setAttribute("value", num);
        getsubtotal[key].innerHTML = num * getprice[key].innerHTML;
        xx();
      };
    });
    getreduce.forEach(function (itemm, keyy) {
      itemm.onclick = function () {
        var num2 = getinput[keyy].value;
        if (num2 > 0) {
          num2 = num2 - 1;
        }
        getinput[keyy].setAttribute("value", num2);
        getsubtotal[keyy].innerHTML = num2 * getprice[keyy].innerHTML;
        xx();
      };
    });
    //合计
    function xx() {
      var total1 = 0;
      getinput.forEach(function (item, key) {
        total1 += parseInt(item.value);
      });
      total.innerHTML = total1;
      var subtotal1 = 0;
      getsubtotal.forEach(function (item, key) {
        subtotal1 += parseFloat(item.innerHTML);
      });
      priceTotal.innerHTML = subtotal1;
    }
    xx();
    //多选
    var getcheckalls = document.querySelectorAll(".check-all");//数组！，你不分开取值，绑个锤子
    var getchecks = document.querySelectorAll(".check-one");//数组！，你不分开取值，绑个锤子,取个锤子的属性值
    for (let i = 0; i < getcheckalls.length; i++) {//数组！，你不分开取值，绑个锤子

      getcheckalls[i].onclick = function () {
        var flag = getcheckalls[i].checked;

        for (let i = 0; i < getchecks.length; i++) {
          getchecks[i].checked = flag;
        }

        for (let i = 0; i < getcheckalls.length; i++) {
          getcheckalls[i].checked = flag
        }
      }
    }

    // getcheckalls.forEach(item => {
    //   item.onclick = (e) => {
    //     getchecks.forEach(item => { item.checked = e.target.checked });
    //   }
    // })

    var getchecksArr = Array.from(getchecks);
    // getchecks.every()
    console.log(getchecksArr, getchecks);
    for (let i = 0; i < getchecksArr.length; i++) {
      getchecksArr[i].onclick = function () {

        var flag = getchecksArr.every(function (item) {
          return item.checked
        })
        console.log(flag, "---------------flag");
        for (let i = 0; i < getcheckalls.length; i++) {
          getcheckalls[i].checked = flag
        }
      }
    }

    // getchecks.forEach(item => {
    //   item.onclick = () => {
        //let flag = getchecks.every(item => item.checked);//index.html:334 Uncaught TypeError: getchecks.every is not a function
        // let arr = [...getchecks];
        // let flag = arr.every(item => item.checked);
    //     let flag = [...getchecks].every(item => item.checked);
    //     getcheckalls.forEach(item => item.checked = flag);
    //   }
    // })



  </script>
</body>

</html>